<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!--交互使用文件-->
    <link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css"/>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/jNotify.jquery.js"></script>
</head>
<body>
<div style="padding: 15px;">
    <blockquote class="layui-elem-quote">公告列表</blockquote>
    <table id="newsTable" lay-filter="newsTable"></table>

</div>
<script src="layui/layui.all.js"></script>
<script src="layui/layui.js"></script>
<script type="text/html" id="optBar">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script>

    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
       tableIns= table.render({
            elem: '#newsTable'
            , url: '/news/queryAllNotice', //数据接口
            request: {
                pageName: 'currPage', //页码的参数名称，默认：pageNum
                limitName: 'pageSize' //每页数据量的参数名，默认：pageSize
            },
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 0, //成功的状态码，默认：0
                countName: 'total', //数据总数的字段名称，默认：count
                dataName: 'datas' //数据列表的字段名称，默认：data
            }
            , cols: [[ //表头
                {field: 'newsId', title: 'ID', width: "10%", sort: true, fixed: 'left'},
                {field: 'timeA', title: '时间', width: "20%", sort: true},
                {field: 'title', title: '公告标题', width: "20%"}
                , {field: 'content', title: '公告内容', width: "20%"}
                , {field: 'state', title: '类型', width: "20%",
                   templet: function (d) {
                       if (d.state === 1) {
                           return '<div class="state">新闻</div>'
                       }
                       if (d.state === 2) {
                           return '<div class="state">公告</div>'
                       }

                   }}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#optBar', width: "10%"}
            ]],
            done: function (res, curr, count) {
                pageCurr = curr;
            }
        });

        //监听工具条
        table.on('tool(newsTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                //删除
                deleteIdea(data, obj);

            }
        });

    });

    //重新加载table
    function load(obj) {
        tableIns.reload({
            where: obj.field
            , page: {
                curr: pageCurr //从当前页码开始
            }
        });
    }

    function deleteIdea(data, obj) {
        //删除
        if (null != data.newsId) {
            layer.confirm('您确定要删除吗？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                $.post("/news/delNews", {"newsId": data.newsId}, function (data) {
                    if (data.code == 0) {
                        layer.alert("删除成功", function () {
                            layer.closeAll();
                            load(obj); //刷新
                        });
                    } else {
                        layer.alert("删除失败");
                    }
                });
            }, function () {
                layer.closeAll();
            });
        }
    }
</script>
</body>
</html>